<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    </el-breadcrumb>



      <el-row :gutter="20">
        <el-col :span="12"><div id="mainCus" style="width: 400px;height:300px;"></div></el-col>
        <el-col :span="12"><div id="mainGy" style="width: 600px;height:400px;"></div></el-col>
        <el-col :span="12"><div id="mainXs" style="width: 600px;height:400px;"></div></el-col>
        <el-col :span="12"><div id="mainOrders" style="width: 400px;height:300px;"></div></el-col>
      </el-row>



  </div>
</template>

<script>
    export default {
        name: "CusIndex",
      data(){
          return{
            cusName:[],
            cusOrder:[],
            gyName:[],
            gyOrder:[],

            xsName:[],
            xsOrder:[],


            updateDate:[],
            countOrders:[],
            money:[]

          }
      },
      mounted() {
        this.$http.post("/orders/cusOrders").then((res)=>{
             this.updateDate=res.data.result.updateDate;
             this.countOrders=res.data.result.countOrders;
             this.money=res.data.result.money;
              var myChart=this.$echarts.init(document.getElementById('mainOrders'));
             var   option = {
            title: {
              text: '订单量/订单金额',
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['订单数量', '订单金额']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.updateDate
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '订单数量',
                type: 'line',
                stack: '总量',
                data: this.countOrders
              },
              {
                name: '订单金额',
                type: 'line',
                stack: '总量',
                data: this.money
              }
            ]
          };

          myChart.setOption(option);
        })

        //本月每个客户的订单量
        // 指定图表的配置项和数据
        this.$http.post("/orders/cusList").then((res)=>{
          var myChart = this.$echarts.init(document.getElementById('mainCus'));
          // debugger;
           this.cusName=res.data.result.cusName;
           this.cusOrder=res.data.result.cusOrder;

          var option = {
            title: {
              text: '本月每个客户的订单量'
            },
            xAxis: {
              type: 'category',
              data: this.cusName
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data:this.cusOrder,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);

        });


        //工艺订单量占比
        this.$http.post("/orders/gyList").then((res)=>{
          var myChart = this.$echarts.init(document.getElementById('mainGy'));
          this.gyName=res.data.result.cusName;
          this.gyOrder=res.data.result.cusOrder
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '工艺订单量占比',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 10,
              data: this.gyName
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.gyOrder
              }
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })


        //销售额占比
        this.$http.post("/orders/xsList").then((res)=>{
          var myChart = this.$echarts.init(document.getElementById('mainXs'));
          debugger;
          this.xsName=res.data.result.cusName;
          this.xsOrder=res.data.result.cusOrder
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '销售额占比',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: this.xsName
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data:this.xsOrder,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })




      }
    }
</script>

<style scoped>

</style>
